<!-- overtime_record.vue -->
<template>
    <div class="" >
      <div class="row">
        <div class="col-sm-3 control-label" style="margin-bottom: 10px;">{{item.label}}</div>
        <div class="col-sm-9" style="margin-bottom: 10px;">
          <input :id="item.label" type="text" value="" class="form-control"
                 :name="label" :name1="item.name1" :name2="item.name2" readonly>
        </div>
      </div>
    </div>
</template>
<script>
  import { SET_DATEPARAMS } from 'src/store/mutation-types.js';
  export default{
    props:["item","initDateRange"],
    data(){
      return{
      }
    },
    created() {
      this.$nextTick(() => {
        let datePick={};
        let item  = this.item;
        datePick[`${item.label}`]={
          [`${item.name1}`]:moment().subtract(6, 'days').format('YYYY-MM-DD 00:00:00'),
          [`${item.name2}`]: moment().format('YYYY-MM-DD 23:59:59')
        };
//      console.log("datePick",datePick);
        this.$store.commit(SET_DATEPARAMS, datePick);
        this.initDateRange(this.item,$store,this.dataPick);
      });
    },
    methods:{
      dataPick(item,store){
        let option={
          format:'YYYY-MM-DD',
          timePicker:false
        };
        if(item.type===2){
          option = {
            format:'YYYY-MM-DD HH:mm:ss',
            timePicker:true
          }
        }
        $(`input[id=${item.label}]`).daterangepicker({
          ranges: {
            '今天': [moment(), moment()],
            '最近7天': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29, 'days'), moment()],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
          },
          "opens": "right",
          startDate:moment().subtract(6, 'days'),
          endDate: moment(),
          autoclose: true,
          timePicker:option.timePicker,//是否使用timepicker
          showDropdowns:true,
          applyClass : 'btn-small btn-primary',
          cancelClass : 'btn-small',
          locale : {
            separator: '~',//分隔符
            applyLabel : '确定',
            cancelLabel : '清除',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月',
              '7月', '8月', '9月', '10月', '11月', '12月' ],
            firstDay : 1,
            customRangeLabel:"选择起止日期",
            format : option.format
          },
        }, function(start, end, label) {
          let format = option['format'];
          let datePick={};
          datePick[`${item.label}`]={
            [`${item.name1}`]:start.format('YYYY-MM-DD HH:mm:ss'),
            [`${item.name2}`]:end.format('YYYY-MM-DD HH:mm:ss')
          };
          store.commit(SET_DATEPARAMS, datePick);
        });
        //清除
        $(`input[id=${item.label}]`).on('cancel.daterangepicker',function(ev, picker) {
          $(`input[id=${item.label}]`).val('');
          let datePick={};
          datePick[`${item.label}`]={
            [`${item.name1}`]:'',
            [`${item.name2}`]:''
          };
          store.commit(SET_DATEPARAMS, datePick);
        });
      }
    }
  }
</script>
